<template>
  <div>
    <!-- 基础类型 -->
    <!-- <input type="text" v-model="name" /> -->
    <!-- 复杂类型 -->
    <input type="text" v-model="username.name" />
  </div>
</template>

<script>
// 基础
// 目标：侦听属性值改变
// 注意：侦听data里，computed里定义的属性名（变量名）
// watch:{
//   '要侦听的属性名'（新的变量，旧的变量）{
//     侦听属性的值发生变化就自动触发次函数
//   }
// }
// export default {
//   data () {
//     return {
//       name: ''
//     }
//   },

//   watch: {
//     name (newname, oldname) {
//       console.log(newname)
//     }
//   }
// }

// 对象复杂
export default {
  data () {
    return {
      username: {
        name: ''
      }
    }
  },
  watch: {
    // username(newname, oldname){
    //    console.log(newname)//这样是无法监听的需要开启深度监听
    // }
    username: {
      deep: true,//开启深度侦听--vue源码会尝试侦听对象里的属性值变化
      handler (newname, oldname) {//handler(固定写法)，和上面函数作用一直，当深度侦听到对象里有变化，次函数执行
        console.log(newname, oldname)
        // 这里的newname,oldname都是username的对象
        // 都是指向的同时同一个对象的内存地址
      }
    },
    // key是一段表达式，要用属性名表达式写法
    // [key表达式]
    ['username.name'] (newname, oldname) {
      console.log(newname, oldname)
    }
  }
}
</script>